<template>
	<view class="container">
		<view class="formBox">
			<uni-forms ref="form" :modelValue="FormData">
				<view class="box">
					<uni-forms-item label="费用名称">
						<view class="dis-input">{{ detail.bill_title }}</view>
					</uni-forms-item>
					<uni-forms-item label="账单金额">
						<view class="dis-input">{{ detail.bill_money }}</view>
					</uni-forms-item>
					<uni-forms-item label="待收日期" v-if="type == 'rent'">
						<view class="dis-input">{{ detail.bill_date }}</view>
					</uni-forms-item>
					<uni-forms-item label="待付日期" v-else-if="type == 'owner'">
						<view class="dis-input">{{ detail.bill_date }}</view>
					</uni-forms-item>
					<uni-forms-item label="备注" name="rent_remark">
						<uni-easyinput type="textarea" v-model="FormData.rent_remark" placeholder="请填写备注信息" />
					</uni-forms-item>
					<view class="imgtitle">
						<text class="name">图片</text>
						<text class="tip">(限{{ limit }}张图片，单个图片大小不超过{{ max }}M)</text>
					</view>
					<imageUpload :image="FormData.bill_images" :limit="limit" :max="max" @onChange="imageChange" />
				</view>
				<view class="btns">
					<button class="btn" type="primary" @click="submit">确 定</button>
				</view>
			</uni-forms>
		</view>
	</view>
</template>

<script>
import api from '@/api/api';
export default {
	data() {
		return {
			type: '',
			limit: 3,
			max: 10,
			FormData: {
				bill_id: '',
				bill_images: '',
				bill_desc: ''
			},
			detail: {}
		};
	},
	onLoad(e) {
		this.type = e.type;
		this.FormData.bill_id = e.id;
	},
	onShow() {
		if (this.type == 'rent') {
			uni.setNavigationBarTitle({
				title: '完成收款'
			});
			this.getRent();
		} else if (this.type == 'owner') {
			uni.setNavigationBarTitle({
				title: '完成付款'
			});
			this.getOwner();
		}
	},
	methods: {
		imageChange(e) {
			this.FormData.bill_images = e.join(',');
		},
		submit() {
			if (this.type == 'rent') {
				uni.showLoading();
				api.billSet(this.FormData).then((res) => {
					if (res.data.is_success) {
						uni.hideLoading();
						uni.showToast({
							title: '收款成功'
						});
						setTimeout(() => {
							uni.hideToast();
							uni.navigateBack();
						}, 1000);
					} else {
						uni.hideLoading();
						uni.showToast({
							title: '收款失败',
							icon: 'none'
						});
					}
				});
			} else if (this.type == 'owner') {
				uni.showLoading();
				api.billOwnerSet(this.FormData).then((res) => {
					if (res.data.is_success) {
						uni.hideLoading();
						uni.showToast({
							title: '付款成功'
						});
						setTimeout(() => {
							uni.hideToast();
							uni.navigateBack();
						}, 1000);
					} else {
						uni.hideLoading();
						uni.showToast({
							title: '付款成功',
							icon: 'none'
						});
					}
				});
			}
		},
		getRent() {
			api.billDetail({ bill_id: this.FormData.bill_id }).then((res) => {
				this.detail = res.data.info;
				this.FormData.bill_images = res.data.info.bill_images;
				this.FormData.bill_desc = res.data.info.bill_desc;
			});
		},
		getOwner() {
			api.billDetailOwner({ bill_id: this.FormData.bill_id }).then((res) => {
				this.detail = res.data.info;
				this.FormData.bill_images = res.data.info.bill_images;
				this.FormData.bill_desc = res.data.info.bill_desc;
			});
		}
	}
};
</script>

<style lang="scss">
.formBox {
	.box {
		padding-bottom: 20rpx;
		.imgtitle {
			margin-bottom: 20rpx;
			margin-top: 20rpx;
			.name {
				font-size: 28rpx;
				margin-right: 20rpx;
				color: #606266;
			}
			.tip {
				font-size: 26rpx;
				color: $uni-secondary-color;
			}
		}
	}
}
</style>
